<template>
	<div class="warp">
		<div class="bg content">
			<div class="logo">
				<img src="../../../images/logo_03.png" alt="">
			</div>
			<txt></txt>
			<div class="people_cont">
				<!-- 中心圆 -->
				<animation></animation>
				<contentimg></contentimg>
				<div class="circular">
					<img :src="imgUrl" alt="">
				</div>
				<!-- 随机图片上传 -->
				<div class="imgs">
					<!-- <img src="../../../dist/img/psb4MTIILJZ.f2f3a9ff.jpg" alt=""> -->
				</div>
				<!-- 底部的按钮文字 -->
				<btnLoad></btnLoad>
			</div>
		</div>
	
	</div>
</template>

<script>
	import btnLoad from "@/components/fourTest/btnLoad.vue";
	import txt from "@/components/fourTest/topTxt.vue";
	import animation from "@/components/animation.vue";
	import contentimg from "@/components/fourTest/contentImg.vue";
	export default {
		data(){
			return {
				imgUrl:""
			}
		},
		components:{
			btnLoad,
			txt,
			animation,
			contentimg
		},
		mounted() {
			this.imgUrl = this.$route.params.imgUrl
		}
	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}
	
	.content {
		
	}
	
	.people_cont{
		height: 112vw;
		width: px2vw(636);
		background: url(../../../images/tuku_03.png) center no-repeat;
		background-size: cover;
		margin-left: auto;
		margin-right: auto;
		margin-top: px2vw(37);
		position: relative;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.imgs{
			height: 100px;
			width: 100px;
			position: absolute;
			
			img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
	.people_cont::before{
		content: '';
		position: absolute;
		width: px2vw(124);
		height: px2vw(78);
		top: px2vw(-32);
		left: 10px;
		background: url(../../../images/pikaqiu_logo_03.png) no-repeat;
		background-size: cover;
	}
	.people_cont::after{
		content: '';
		position: absolute;
		width: px2vw(124);
		height: px2vw(78);
		top: px2vw(-32);
		right: 10px;
		background: url(../../../images/pika_right_03.png) no-repeat;
		background-size: cover;
	}
	
	.circular {
		width: px2vw(174);
		height: px2vw(174);
		margin-top: px2vw(230);
		background: url(../../../images/circular_03.png) center no-repeat;
		background-size: cover;
		position: absolute;
		img{
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
</style>
